<template>
  <div class="notebooks-container">
    <div class="toolbar">
      <h2 class="page-title">笔记本管理</h2>
      <el-button type="primary" @click="showCreateDialog">
        <el-icon><Plus /></el-icon>
        新建笔记本
      </el-button>
    </div>
    
    <div v-loading="notebookStore.loading" class="notebooks-list">
      <el-tree
        :data="notebookStore.notebooksTree"
        node-key="id"
        default-expand-all
        :props="treeProps"
      >
        <template #default="{ node, data }">
          <div class="tree-node">
            <span class="node-label">
              <el-icon><Folder /></el-icon>
              {{ node.label }}
            </span>
            <div class="node-actions">
              <el-button
                type="text"
                size="small"
                @click.stop="handleEdit(data)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.stop="handleDelete(data.id)"
              >
                删除
              </el-button>
            </div>
          </div>
        </template>
      </el-tree>
      
      <el-empty v-if="!notebookStore.loading && notebookStore.notebooksTree.length === 0" description="暂无笔记本" />
    </div>
    
    <!-- 创建/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑笔记本' : '新建笔记本'"
      width="500px"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入笔记本名称" />
        </el-form-item>
        <el-form-item label="父笔记本" prop="parent_id">
          <el-select v-model="form.parent_id" placeholder="选择父笔记本（可选）" clearable>
            <el-option
              v-for="notebook in notebookStore.notebooks"
              :key="notebook.id"
              :label="notebook.name"
              :value="notebook.id"
              :disabled="isEdit && notebook.id === currentId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useNotebookStore } from '@/stores/notebook'

const notebookStore = useNotebookStore()

const dialogVisible = ref(false)
const isEdit = ref(false)
const currentId = ref(null)
const formRef = ref()

const form = reactive({
  name: '',
  parent_id: null
})

const rules = {
  name: [
    { required: true, message: '请输入笔记本名称', trigger: 'blur' }
  ]
}

const treeProps = {
  label: 'name',
  children: 'children'
}

onMounted(() => {
  loadData()
})

async function loadData() {
  await notebookStore.fetchNotebooksTree()
  await notebookStore.fetchNotebooks()
}

function showCreateDialog() {
  isEdit.value = false
  currentId.value = null
  form.name = ''
  form.parent_id = null
  dialogVisible.value = true
}

function handleEdit(data) {
  isEdit.value = true
  currentId.value = data.id
  form.name = data.name
  form.parent_id = data.parent_id
  dialogVisible.value = true
}

async function handleDelete(id) {
  await ElMessageBox.confirm('确定要删除这个笔记本吗？', '提示', {
    type: 'warning'
  })
  await notebookStore.removeNotebook(id)
}

async function handleSubmit() {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      if (isEdit.value) {
        await notebookStore.modifyNotebook(currentId.value, form)
      } else {
        await notebookStore.addNotebook(form)
      }
      dialogVisible.value = false
    }
  })
}
</script>

<style scoped>
.notebooks-container {
  max-width: 1000px;
  margin: 0 auto;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.notebooks-list {
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-height: 400px;
}

.tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 16px;
}

.node-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.node-actions {
  display: none;
}

.tree-node:hover .node-actions {
  display: block;
}
</style>

